@import './reset';

@function getVw($w) {
  @return calc($w / 375) * 100+vw;
}

.wrap {
  header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: getVw(5) 0;

    h3 {
      font-size: getVw(16);
      font-weight: normal;
      flex-grow: 1;
      text-align: center;
      margin-left: 50%;
      transform: translateX(-50%);
      // margin-left: getvw(28);
      padding: getVw(7) 0;
    }

    p {
      a {
        font-size: getVw(14);
        color: #555555;
        margin-right: getVw(23);
      }
    }
  }

  main {
    .head {
      padding-top: getVw(20);
      padding-bottom: getVw(30);
      border-top: 1px solid #E9ECF0;
      border-bottom: 1px solid #E9ECF0;

      .imgBox {
        width: getVw(66);
        height: getVw(66);
        border-radius: getVw(66);
        border: 1px solid #000;
        overflow: hidden;
        margin-left: 50%;
        transform: translateX(-50%);

        img {
          width: 100%;
        }
      }

      p {
        margin-top: getVw(2);
        text-align: center;
      }
    }

    .ul {
      .ul-li {
        display: flex;
        margin: 0 getVw(15);
        border-bottom: 1px solid #e9ecf0;
        padding: getVw(21) 0;

        p:first-child {
          font-size: getVw(14);
          margin-right: getVw(46);
        }

        p:last-child {
          font-size: getVw(13.33);
        }
      }

      .gender {
        input {
          margin-right: getVw(15);
        }

        label {
          font-size: getVw(13.33);
          margin-right: getVw(25);
        }
      }
    }
  }
}